<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>Document</title>
		<style>
			body {
				overflow: hidden;
				margin: 0;
				font-size: 14px;
				font-family: "Helvetica Neue", Helvetica;
			}
			#chart {
				position: absolute;
				top: 50px;
				left: 100px;
			}
		</style>
		<script src="http://d3js.org/d3.v3.min.js"></script>
	</head>
	<body>
		<div id="body">
			<div id="chart"></div>
		</div>
	</body>
	<script>
		const d = [
			[
				{ axis: "Email", value: 1 },
				{ axis: "Social Networks", value: 0.86 },
				{ axis: "Internet Banking", value: 0.62 },
				{ axis: "News Sportsites", value: 0.54 },
				{ axis: "Search Engine", value: 0.88 },
				{ axis: "View Shopping sites", value: 0.14 },
			],
			[
				{ axis: "Email", value: 0.78 },
				{ axis: "Social Networks", value: 0.68 },
				{ axis: "Internet Banking", value: 0.47 },
				{ axis: "News Sportsites", value: 0.45 },
				{ axis: "Search Engine", value: 0.46 },
				{ axis: "View Shopping sites", value: 0.69 },
				{ axis: "Paying Online", value: 0 },
			],
		];
		const draw = function (id, d) {
			const cfg = {
				// 节点半径
				radius: 4,
				// 图表尺寸
				w: 400,
				h: 400,
				// 缩放系数
				factor: 1,
				// 文字离圆心的间距
				factorLegend: 0.85,
				levels: 10,
				maxValue: 1,
				// 周长
				radians: 2 * Math.PI,
				opacityArea: 0.3,
				// 数值标注间距
				ToRight: 5,
				// 雷达图偏移
				TranslateX: 80,
				TranslateY: 30,
				// 画布额外尺寸
				ExtraWidthX: 150,
				ExtraWidthY: 100,
				// 颜色数值集
				color: d3.scale.ordinal().range(colors),
				// 网格线颜色
				gridLineColor: "#B5306A",
				// 分割线颜色
				dividerColor: "#B5306A",
			};

			// 合并配置
			for (let i in options) {
				if ("undefined" !== typeof options[i]) {
					cfg[i] = options[i];
				}
			}

			// 计算最大值以适配图案大小
			cfg.maxValue = Math.max(
				cfg.maxValue,
				d3.max(d, function (i) {
					return d3.max(
						i.map(function (o) {
							return o.value;
						})
					);
				})
			);
			// 维度数组
			let allAxis = d[0].map(function (i, j) {
				return i.axis;
			});
			// 维度的个数
			let total = allAxis.length;
			// 雷达图的半径
			let radius = cfg.factor * Math.min(cfg.w / 2, cfg.h / 2);
			// 格式化%
			let Format = d3.format("%");
			d3.select(id).select("svg").remove();

			let g = d3
				.select(id)
				.append("svg")
				.attr("width", cfg.w + cfg.ExtraWidthX)
				.attr("height", cfg.h + cfg.ExtraWidthY)
				.append("g")
				.attr(
					"transform",
					"translate(" + cfg.TranslateX + "," + cfg.TranslateY + ")"
				);
		};

		draw("#chart", d);

		for (let j = 0; j < cfg.levels - 1; j++) {
			let levelFactor = cfg.factor * radius * ((j + 1) / cfg.levels);
			g.selectAll(".levels")
				.data(allAxis)
				.enter()
				.append("svg:line")
				.attr("x1", function (d, i) {
					return (
						levelFactor *
						(1 - cfg.factor * Math.sin((i * cfg.radians) / total))
					);
				})
				.attr("y1", function (d, i) {
					return (
						levelFactor *
						(1 - cfg.factor * Math.cos((i * cfg.radians) / total))
					);
				})
				.attr("x2", function (d, i) {
					return (
						levelFactor *
						(1 -
							cfg.factor *
								Math.sin(((i + 1) * cfg.radians) / total))
					);
				})
				.attr("y2", function (d, i) {
					return (
						levelFactor *
						(1 -
							cfg.factor *
								Math.cos(((i + 1) * cfg.radians) / total))
					);
				})
				.attr("class", "line")
				.style("stroke", cfg.gridLineColor)
				.style("stroke-opacity", "0.75")
				.style("stroke-width", "0.3px")
				.attr(
					"transform",
					"translate(" +
						(cfg.w / 2 - levelFactor) +
						", " +
						(cfg.h / 2 - levelFactor) +
						")"
				);
		}
	</script>
</html>
